<template>
  <div class="relative group">
    <button 
      @click="toggleDropdown"
      class="flex items-center px-3 py-1.5 hover:bg-gray-50 rounded-full transition-colors duration-200"
    >
      <span class="text-gray-700">{{ label }}</span>
      <i class="ri-arrow-down-s-line ml-1 text-gray-400 group-hover:text-blue-600 transition-colors duration-200"></i>
    </button>
    
    <div 
      v-if="isOpen"
      class="absolute top-full left-0 mt-1 w-48 bg-white rounded-lg shadow-lg border border-gray-100 py-2 z-50"
    >
      <div 
        v-for="option in options"
        :key="option"
        @click="selectOption(option)"
        class="px-4 py-2 hover:bg-gray-50 cursor-pointer text-sm"
      >
        {{ option }}
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

interface Props {
  label: string
  options: string[]
}

defineProps<Props>()

const emit = defineEmits<{
  select: [value: string]
}>()

const isOpen = ref(false)

const toggleDropdown = () => {
  isOpen.value = !isOpen.value
}

const selectOption = (option: string) => {
  emit('select', option)
  isOpen.value = false
}

const closeDropdown = (event: Event) => {
  if (!(event.target as Element).closest('.relative.group')) {
    isOpen.value = false
  }
}

onMounted(() => {
  document.addEventListener('click', closeDropdown)
})

onUnmounted(() => {
  document.removeEventListener('click', closeDropdown)
})
</script>
